<template>
  <div class="flex flex-col">
    <Tabs
      v-model="componentId"
      class="px-14px border-solid border-neutral-100 bg-white"
    >
      <Tab title="工作台" name="console" title-class="!flex-none mr-34px p-0">
      </Tab>
      <Tab title="外出" name="visit" title-class="!flex-none mr-34px p-0">
      </Tab>
      <Tab
        title="工作量"
        name="statistics"
        title-class="!flex-none mr-34px p-0"
      >
      </Tab>
    </Tabs>
    <keep-alive>
      <component :is="componentId" class="flex-1 overflow-hidden"></component>
    </keep-alive>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
import { getLocationParam } from "@/utils/tools";
export default {
  name: "workbench",
  components: {
    Tab,
    Tabs,
    Console: () => import("./console/index.vue"),
    Visit: () => import("./visit/index.vue"),
    Statistics: () => import("./statistics/index.vue"),
  },
  data() {
    return {
      componentId: "console",
    };
  },
  created() {
    this.get_Param();
  },
  methods: {
    get_Param() {
      let per = getLocationParam("permission");
      console.log("我是：" + per);
      localStorage.setItem("permission", "manageArea"); //*****这里记得改回per变量 */
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.van-tabs {
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.02);
}
</style>
